<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="#00aaff" status-bar left-icon="left" title="个人开户" @clickLeft="back"/>
		<view class="page">
			<uni-forms ref="baseForm" :model="model" :rules="rules" label-position="top" label-width="150">
				<uni-forms-item label="户名" name="account_name" required>
					<uni-easyinput v-model="model.account_name" :maxlength="60" placeholder="请输入电子账簿户名" />
				</uni-forms-item>
				<uni-row :gutter="20">
					<uni-col :span="12">
						<uni-forms-item label="身份证正面照" name="id_card_front_no" required>
							<upload-id-card file-type="01" v-model="model.id_card_front_no" @onSelect="handleSelectFile"></upload-id-card>
						</uni-forms-item>
					</uni-col>
					<uni-col :span="12">
						<uni-forms-item label="身份证国徽面" name="id_card_back_no" required>
							<upload-id-card file-type="02" v-model="model.id_card_back_no" @onSelect="handleSelectFile"></upload-id-card>
						</uni-forms-item>
					</uni-col>
				</uni-row>
				<uni-forms-item label="真实姓名" name="realname" required>
					<uni-easyinput v-model="model.realname" :maxlength="60" placeholder="请输入真实姓名" />
				</uni-forms-item>
				<uni-forms-item label="证件号" name="id_no" required>
					<uni-easyinput v-model="model.id_no" :maxlength="32" placeholder="请输入证件号" />
				</uni-forms-item>
				<uni-forms-item label="人脸照片" name="face_no" required>
					<upload-id-card file-type="04" :id_no="model.id_no" :name="model.realname" :width="158" :height="158" v-model="model.face_no" @onSelect="handleSelectFile"></upload-id-card>
				</uni-forms-item>
				<uni-forms-item label="性别" name="sex">
					<uni-data-checkbox v-model="model.sex" :localdata="[{text: '男', value: 0}, {text: '女', value: 1}]" />
				</uni-forms-item>
				<uni-forms-item label="民族" name="ethnic">
					<uni-easyinput v-model="model.ethnic" :maxlength="20" placeholder="请输入民族"/>
				</uni-forms-item>
				<uni-forms-item label="证件地址" name="id_address" required>
					<uni-easyinput type="textarea" v-model="model.id_address" :maxlength="200" placeholder="请输入证件地址" />
				</uni-forms-item>
				<uni-forms-item label="证件有效期(起)" name="id_start_date" required>
					<uni-datetime-picker v-model="model.id_start_date" type="date" placeholder="请选择证件起始日期"/>
				</uni-forms-item>
				<uni-forms-item label="证件有效期(止)" name="id_end_date" required>
					<uni-datetime-picker v-model="model.id_end_date" type="date" placeholder="请选择证件失效日期"/>
				</uni-forms-item>
				<uni-forms-item label="签发机关" name="sign_name" required>
					<uni-easyinput type="textarea" v-model="model.sign_name" :maxlength="200" placeholder="请输入签发机关" />
				</uni-forms-item>
				<uni-forms-item label="职业" name="job" required>
					<uni-data-picker :localdata="jobList" popup-title="请选择职业" v-model="model.job" :map="{text: 'name', value: 'codes'}" @change="onChangeJob"></uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="职业备注" name="job_note" required v-if="showJobsOther">
					<uni-easyinput type="textarea" v-model="model.job_note" :maxlength="200" placeholder="请输入职业备注" />
				</uni-forms-item>
				<uni-forms-item label="银行卡号" name="primary_account" required>
					<uni-easyinput v-model="model.primary_account" :maxlength="32" placeholder="请输入银行卡号" />
				</uni-forms-item>
				<uni-forms-item label="手机号" name="mobile" required>
					<uni-easyinput type="number" v-model="model.mobile" :maxlength="11" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="验证码" name="verify_code" required>
					<send-sms-code :mobile="model.mobile" :card_name="model.realname" :id_no="model.id_no" :card_no="model.primary_account" v-model="model.verify_code" @onSend="handleOnSendCode"></send-sms-code>
				</uni-forms-item>
			</uni-forms>
			<show-agreement v-model="model.agreement_no" />
			<button type="primary" @click="onSubmit">确认开户</button>
		</view>
	</view>
	
</template>

<script>
	import UploadIdCard from "@/components/formItem/UploadIdCard"
	import SendSmsCode from "@/components/formItem/SendSmsCode"
	import ShowAgreement from "@/components/ShowAgreement"
	
	export default {
		components : {
			UploadIdCard, SendSmsCode, ShowAgreement
		},
		
		data() {
			return {
				jobList: [],
				showJobsOther:false,
				model: {},
				rules: {
					account_name: {
						rules: [
							{ required: true, errorMessage: '请输入正确户名'}
						]
					},
					id_card_front_no: {
						rules: [
							{ required: true, errorMessage: '请上传身份证正面照'}
						]
					},
					id_card_back_no: {
						rules: [
							{ required: true, errorMessage: '请上传身份证背面照'}
						]
					},
					job: {
						rules: [
							{ required: true, errorMessage: '请选择职业'}
						]
					},
					id_start_date: {
						rules: [
							{ required: true, errorMessage: '请选择证件有效期'}
						]
					},
					id_end_date: {
						rules: [
							{ required: true, errorMessage: '请选择证件有效期'}
						]
					},
					realname: {
						rules: [
							{ required: true, errorMessage: '请输入正确真实姓名'}
						]
					},
					id_no: {
						rules: [
							{ required: true, errorMessage: '请输入正确证件号'}
						]
					},
					id_address: {
						rules: [
							{ required: true, errorMessage: '请输入正确证件地址'}
						]
					},
					sign_name: {
						rules: [
							{ required: true, errorMessage: '请输入正确签发机关'}
						]
					},
					primary_account: {
						rules: [
							{ required: true, errorMessage: '请输入正确银行卡号'}
						]
					},
					mobile: {
						rules: [
							{ required: true, errorMessage: '请输入正确手机号'}
						]
					},
					verify_code: {
						rules: [
							{ required: true, errorMessage: '请输入正确验证码'}
						]
					},
					face_no: {
						rules: [
							{ required: true, errorMessage: '请上传人脸照'}
						]
					}
				}
			}
		},
		
		onShow() {
			let uid = uni.getStorageSync('uid');
			
			if(!uid || uid == "") {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			} else {
				this.getJobList()
			}
			
		},
		
		methods: {
			maskClick(e){
							console.log('maskClick事件:', e);
						},
			back() {
				uni.redirectTo({
					url: '/pages/openAccount/index'
				})
			},
			getJobList() {
				uni.request({
					url: '/util/getJobList',
					success: (res) => {
						if(res.data.success) {
							this.jobList = res.data.data
						} else {
							uni.showToast({
								icon: 'error',
								title: res.data.errMessage
							})
						}
					}
				})
			},
			
			onChangeJob( { detail } ) {
				let showJobsOther = false
				detail.value.map( item => {
					if(item.text.includes("其他")) {
						showJobsOther = true
					}
				})
				this.showJobsOther = showJobsOther
			},
			
			clickLongDate() {
				this.$set(this.model,'id_end_date','2099-12-31')
			},
			
			handleSelectFile(data) {
				 this.model = {
					 ...this.model,
					 ...data
				 }
			},
			
			handleOnSendCode(data) {
				this.model = {
					 ...this.model,
					 ...data
				}
			},
			
			onSubmit() {
				if(!('trade_no' in this.model) || this.model.trade_no == "" ) {
					uni.showToast({
						icon: 'error',
						title: '请先发送验证码'
					})
					return ;
				}
				
				if(this.showJobsOther && (!('job_note' in this.model) || this.model.job_note == "") ) {
					uni.showToast({
						icon: 'error',
						title: '请输入职业备注'
					})
					return ;
				}
				
				if(!('agreement_no' in this.model) || this.model.agreement_no == "") {
					uni.showToast({
						icon: 'error',
						title: '请勾选开户协议'
					})
					return ;
				}
				
				this.$refs.baseForm.validate().then(res => {
					uni.showLoading({
						title: '提交中...',
						mask: true
					})
					uni.request({
						url: "/account/openAccount",
						data: {
							uid: uni.getStorageSync('uid'),
							...this.model
						},
						method: "POST",
						success: (res) => {
							if(res.data.success) {
								uni.showToast({
									icon: 'success',
									title: '开户成功'
								})
								setTimeout( () => {
									uni.redirectTo({
										url: '/pages/index/index'
									})
								}, 2000)
							} else {
								uni.showToast({
									icon: 'error',
									title: res.data.errMessage
								})
							}
						},
						complete: () => {
							uni.hideLoading()
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	
	.page {
		width: 750rpx;
		background: #fff;
		padding: 60rpx 40rpx;
		box-sizing: border-box;
	}
	
	.long-button {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		margin-left: 20rpx;
	}
</style>
